<template>
  <div class="content invite-member">
    <dc-header :page-to="'/membersShip'" :title="'邀请成员'"></dc-header>
    <div class="content-body">
    <div class="head-top">
      <div class="mt20" @click="showselect">
        <dc-cell title="当前要邀请的角色" :value="selectedRole.name" isLink></dc-cell>
      </div>
      <div class="mt-1 mt20" @click="showcontact">
        <dc-cell title="通过通讯录邀请伙伴" label="邀请自己手机通讯录的联系人"
                 leftIcon="icon-invite-telephone"
                 :leftStyle="{fontSize:'30px',color:'#33c58c'}"
                 isLink></dc-cell>
      </div>
      <div @click="jumpwithdata">
        <dc-cell title="输入手机号邀请伙伴" label="手动输入手机号进行邀请"
                 leftIcon="icon-invite-telephone" :leftStyle="{fontSize:'30px',color:'#F8CD5F'}" isLink></dc-cell>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
  import header from '@/common/plugins/header';
  import api from '../../common/api/member';
  import cell from '@/common/plugins/cell';
  import mintUi from '../../common/mintUi';
  import store from '../../vuex/store';
  import {mapActions} from 'vuex';
  import router from '@/router/index';
  import nativeAction from '@/common/native';

  export default {
    data () {
      return {
        sheetVisible: false,
        currentValue: '请选择',
        rolelist: [],
        selectedRole: {name: '请选择'},
        storeCode: store.state.shopAlter.store.storeCode || store.state.shopAlter.store.groupCode
      };
    },
    components: {
      'dc-header': header,
      'dc-cell': cell
    },
    methods: {
      ...mapActions({
        setSheetAction: 'setSheetAction',
        setSheetVisible: 'setSheetVisible'
      }),
      showcontact () {
        if (this.selectedRole.value) {
          nativeAction.pickContacts();
        } else {
          mintUi.openToast('请先选择当前要邀请的角色');
        }
      },
      showselect () {
        let setSV = this.setSheetVisible;
        let self = this;
        this.setSheetAction(this.rolelist.map((item, i) => ({
          name: item.roleName,
          value: item.id,
          method: function (res) {
            setSV(false);
            self.selectedRole = res;
          }
        })));
      },
      jumpwithdata () {
        let self = this;
        if (this.selectedRole.value) {
          router.push({
            path: 'mbInvite',
            query: {
              'roleName': self.selectedRole.name,
              'roleId': self.selectedRole.value,
              'merchantCode': self.storeCode,
              'userName': store.state.login.userInfo.username
            }
          });
        } else {
          mintUi.openToast('请先选择当前要邀请的角色');
        }
      }
    },
    created () {
      let self = this;
      api.getRoleList(self.storeCode)
        .then(res => {
          if (res) {
            self.rolelist = res;
            self.rolelist.map((item, i) => {
              if (item.roleName === '管理员') {
                self.rolelist.splice(i, 1);
              }
            });
          }
        });
      window.getContacts = function (res) {
        let selectobj = JSON.parse(res)[0];
        api.memInvite({
          'roleName': self.selectedRole.name,
          'roleId': self.selectedRole.value,
          'mobile': selectobj.phones[0].replace(/-/g, ''),
          'fullName': selectobj.name,
          'merchantCode': self.storeCode,
          'userName': store.state.login.userInfo.username
        }).then(res => {
          mintUi.openToast('邀请成功');
        });
      };
    }
  };
</script>
<style lang="scss">
  @import "../../assets/css/variable";

  .invite-member {
    text-align: left;
    .mint-header {
      color: #333333;
    }
    .mint-cell-wrapper {
      padding-top: px2rem(20px);
      padding-bottom: px2rem(20px);
    }
    .left-icon {
      i.iconfont {
        font-size: px2rem(80px);
      }
      float: left;
      color: #F8CD5F;
    }
    .mr20 {
      margin-right: px2rem(20px);
    }
  }
</style>
